<script setup lang="ts">
import { ref, inject } from "vue";
export interface Product {
  id: number;
  name: string;
  describe: string;
  price: number;
  isHot?: boolean;
  quantity?: number; // 只在购物车中使用
}
const props = defineProps<{
  product: Product;
}>();
const cart = inject("cart") as {
  items: Product[];
  addItem: (product: Product) => void;
};
function addToCart() {
  cart.addItem(props.product);
}
</script>
<template>
  <button class="cart-button" @click="addToCart()">
    <span>+</span>
  </button>
</template>
<style scoped>
.cart-button {
  padding: 4px 8px;
  background-color: rgb(187, 44, 0);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: 10px;
  bottom: 20px;
}
.cart-button:hover {
  background-color: rgb(241, 82, 54);
}
</style>
